<template>
  <el-container style="height: 100vh">
    <el-header style="height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
      <!-- 左侧控制区域 -->
      <div style="display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;">
        <span style="white-space: nowrap;">指定类：</span>
        <el-select
          v-model="selectedClassName"
          filterable
          :popper-append-to-body="true"
          placeholder="请选择指定类"
          style="width: 200px;"
          class="custom-select"
        >
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        
        <span style="white-space: nowrap;">日志级别：</span>
        <el-select
          v-model="selectedLogLevel"
          filterable
          placeholder="请选择日志级别"
          style="width: 200px;"
        >
          <el-option
            v-for="item in logLevelOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>

        <el-button type="primary" @click="changeLogLevel">设置</el-button>
        <el-button type="info" @click="clearScreen">清屏</el-button>
      </div>
      
      <!-- 右侧按钮 -->
      <BackButton />
    </el-header>
    <el-main style="flex: 90%">
      <div v-for="(message, index) in logs" :key="index">
        {{ index }} {{ message }}
      </div>
    </el-main>
  </el-container>
</template>

<script>
import api from '../api/realtimelog.js'
import conf from '../assets/globalConfig.json'
import BackButton from '../components/BackButton.vue';
import { Message } from 'element-ui'

export default {
  name: "LogPage",
  components:{
    BackButton
  },
  data() {
    return {
      ws: null,
      logs: [],
      logLevelOptions: ["DEBUG", "INFO", "WARN", "ERROR"],
      selectedLogLevel: "",
      classOptions: [
        {
          value:"",
          label:"全局"
        }
      ],
      selectedClassName: "",
    };
  },
  created() {
    this.connect();
    this.getAllClassName()
  },
  methods: {
    connect() {
      this.ws = new WebSocket(conf.wsUrl);
      this.ws.open = () => console.log("log websocket connect success");
      this.ws.onclose = () => console.log("log websocket close");
      this.ws.onerror = (error) => console.log("log websocket error:", error);
      this.ws.onmessage = (msg) => {
        if (msg.data) this.logs.push(msg.data);
      };
    },
    sendMessage(msg) {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(msg);
      }
    },
    getAllClassName(){
      api.getAllClassName().then(data=>{
        for(var ele of data.data){
          this.classOptions.push({
            value:ele,
            label:ele
          })
        }
      }).catch(e=>console.error('获取类名称列表异常',e))
    },
    changeLogLevel(){
      const param = {className:this.selectedClassName,classLevel:this.selectedLogLevel}
      api.changeLogger(param).then(data=>{
        Message.success(data.msg)
      }).catch(e=>console.error('修改类与级别异常',e))
    },
    clearScreen(){
      this.logs=[]
    }
  },
  beforeUnmount() {
    if (this.ws) this.ws.close();
  },
  mounted() {
    // this.$store.commit("showLoading");
    // this.$store.commit("hideLoading");
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: left;
  padding-top: 10px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}

.custom-select {
  width: 200px;
}
.custom-select::v-deep .el-select-dropdown__item {
  text-align: left;
  padding: 0 20px; /* 增加内边距 */
}
</style>
